<template>
  <el-dialog
      v-model="dialogVisible"
      title="新建"
      width="50%"
      class="lookDialog"
      :before-close="beforeClose"
  >
    <el-form
        ref="formRef"
        label-width="auto"
        :model="dataStore.addParams"
    >
      <el-form-item label="数据名称：" prop="dataName">
        <el-input v-model="dataStore.addParams.dataName" placeholder="请输入数据名称"/>
      </el-form-item>
      <el-form-item label="数据项：" prop="fieldList">
        <div class="flex gap-2 flex-wrap">
          <el-tag
              class="mr-2 mb-2"
              v-for="tag in dataStore.addParams.fieldList"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
              v-if="inputVisible"
              ref="InputRef"
              v-model="inputValue"
              class="w-20"
              size="small"
              @keyup.enter="handleInputConfirm"
              @blur="handleInputConfirm"
          />
          <el-button v-else class="button-new-tag" size="small" @click="showInput">
            +数据项
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="dataStore.addParams.remark" placeholder="请输入备注"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <button class="btn-baseStyle btn-baseStyle" @click="resetForm(formRef)">取消</button>
        <button class="btn-baseStyle btn-Primary ml-2" @click="addData">提交</button>
      </span>
    </template>

  </el-dialog>
</template>
<script setup lang="ts">
//组件

//接口


//api
import {reactive, ref, nextTick} from 'vue';
import useDataWriteReportStore from "@/store/modules/dataWriteReport/dataWriteReport";
import {ElInput, FormInstance, ElMessage} from 'element-plus'

//data
const dialogVisible = ref<boolean>(false)
const dataStore = useDataWriteReportStore()
const inputValue = ref('')
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()
const formRef = ref<FormInstance>()
const emit = defineEmits(['addSuccess'])

/*
函数
*/

/**************************接口函数**************************/


/**************************操作函数**************************/
const handleClose = (tag: string) => {
  dataStore.addParams.fieldList.splice(dataStore.addParams.fieldList.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dataStore.addParams.fieldList.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}


const init = () => {
  dialogVisible.value = true
  nextTick(() => {
    formRef.value?.resetFields()
  })
}

const useaddData = async () => {
  let res = await dataStore.useAddData()
  ElMessage({
    type: 'success',
    message: `新建成功`,
  })
  emit('addSuccess')
  dialogVisible.value = false

}

const addData = () => {
  useaddData()
}

const resetForm = (formEl: FormInstance | undefined) => {
  dialogVisible.value = false
}

const beforeClose = () => {
  formRef.value?.resetFields()
  dialogVisible.value = false
}


defineExpose({
  dialogVisible,
  init
})
</script>

<style lang="scss" scoped>
.lookTable {
  :deep(.el-table__header  .el-table__cell) {
    background-color: #F2F2F2;
  }
}
</style>

